import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Popover, PopoverController } from 'react-native-modal-popover';
import styles from '../../style';
import * as constant from '../../style/constant';
const InteractionNavBar = ({ title }) => (
  <View
    style={[
      styles.navigationBar,
      {
        backgroundColor: '#FFF',
        flexDirection: 'row',
        paddingHorizontal: constant.normalMarginEdge,
        justifyContent: 'space-between',
        alignItems: 'center'
      }
    ]}>
    <Text
      style={{
        fontSize: 20,
        color: constant.mainTextColor,
        fontWeight: 'bold'
      }}>
      {title}
    </Text>
    <PopoverController>
      {({
        openPopover,
        closePopover,
        popoverVisible,
        setPopoverAnchor,
        popoverAnchorRect
      }) => (
        <Fragment>
          <TouchableOpacity
            ref={setPopoverAnchor}
            hitSlop={{ top: 20, right: 20, bottom: 20, left: 20 }}
            onPress={() => {
              openPopover();
            }}
            style={styles.centered}>
            <Icon name="tianjia" size={constant.navBarRightIcon} color="#000" />
          </TouchableOpacity>
          <Popover
            contentStyle={styles.content}
            arrowStyle={styles.arrow}
            backgroundStyle={styles.background}
            visible={popoverVisible}
            onClose={() => {
              closePopover();
            }}
            fromRect={popoverAnchorRect}
            supportedOrientations={['portrait', 'landscape']}
            placement="bottom"
            contentStyle={{
              backgroundColor: '#fff',
              borderRadius: constant.GetPercentWidth(1)
            }}
            arrowStyle={{
              borderTopColor: '#fff'
            }}
            backgroundStyle={{
              backgroundColor: 'rgba(0,0,0,0.2)'
            }}>
            <PopoverOption
              iconName="xiaoxi"
              title="进入选择聊天"
              onPress={() => {
                closePopover();
                InteractionManager.runAfterInteractions(() => {
                  Actions.TopContactsPage();
                });
              }}
            />
            <PopoverOption
              iconName="shexiangtou"
              title="待定功能"
              onPress={() => {
                closePopover();
                InteractionManager.runAfterInteractions(() => {
                  Actions.ChatPage();
                });
              }}
            />
            <PopoverOption
              iconName="dizhi"
              title="待定功能"
              onPress={() => {
                closePopover();
                InteractionManager.runAfterInteractions(() => {
                  Actions.developingPage();
                });
              }}
            />
            <PopoverOption
              iconName="saoyisao"
              title="待定功能"
              onPress={() => {
                closePopover();
                InteractionManager.runAfterInteractions(() => {
                  Actions.developingPage();
                });
              }}
              isLastOpt={true}
            />
          </Popover>
        </Fragment>
      )}
    </PopoverController>
  </View>
);
export default InteractionNavBar;
